<template>
  <div class="applyedit-container nav-bar-top">
     <van-nav-bar class="nav-bar" title="售后申请" left-arrow @click-left="$router.back()"/>
     <!-- 商品信息 -->
     <div class="order-goods-list circle-bg">
       <div class="order-goods-item" v-for="(orderGoods, index) in showOrderItemList" :key="index">
         <van-image :src="orderGoods.goodsPic" />
         <div class="goods">
           <span class="title van-multi-ellipsis--l2">{{orderGoods.goodsName}}</span>
           <span class="num">x{{orderGoods.goodsNum}}</span>
           <span class="price">¥{{orderGoods.goodsPrice | fentoyuan}}</span>
         </div>
       </div>
     </div>
     <van-form class="apply-form" @submit="orderReturnApply">
       <div class="circle-bg apply-bg">
         <div class="field-title no-top">申请类型</div>
         <van-radio-group v-model="returnType">
           <van-radio name="0" v-if="orderInfo.status == '1'">退款</van-radio>
           <van-radio name="3" v-if="orderInfo.status == '3' || orderInfo.status == '4'">退货</van-radio>
         </van-radio-group>
       </div>
       <div class="circle-bg apply-bg">
         <div class="field-title no-top">申请原因</div>
         <van-radio-group v-model="applyReasonIndex">
           <van-radio v-for="(reason, index) in returnReasonList" :key="index" :name="index">{{reason}}</van-radio>
         </van-radio-group>
       </div>
       <div class="circle-bg apply-bg">
         <div class="field-title">相关描述</div>
         <van-field
           class="message"
           v-model="applyReason"
           rows="3"
           autosize
           type="textarea"
           placeholder="客官~请描述您遇到的问题，建议上传照片"
         />
       </div>
       <div class="circle-bg apply-bg">
         <div class="field-title">图片说明</div>
         <van-uploader v-model="fileList" multiple :after-read="uploadImg" :before-delete="deleteImg" name="file"/>
       </div>
       <div class="submit">
         <van-button :loading="submitLoading" block native-type="submit">
           提交
         </van-button>
       </div>
     </van-form>
  </div>
</template>

<script>
import constants from '@/config/constants'
import orderApi from '@/api/orderApi';
import sysApi from '@/api/sysApi';
import utils from '@/utils/utils'

export default {
  name: 'applyEdit',
  data () {
    return {
      submitLoading: false,

      /* 申请原因 */
      applyReasonIndex: 0,
      returnReasonList: [
        '卖家发错货了',
        '大小/重量于商品描述不符',
        '质量问题'
      ],

      /* 申请类型 */
      returnType: '0',

      /* 相关描述 */
      applyReason: '',

      /* 图片列表 */
      fileList: [],
      applyPic: [],

      /* 订单信息 */
      orderInfo: {
        orderItemList: []
      },
      /* 申请售后的订单商品列表 */
      showOrderItemList: []
    }
  },
  created () {
    this.getOrderDetail();
  },
  methods: {
    /* 获取订单详情 */
    async getOrderDetail () {
      var goodsIds = this.$route.query.goodsIds.split(',');
      //获取订单详情
      const result = await orderApi.orderDetail(this.$route.query.orderId);
      if(result.code == constants.SUCCESS){
        this.orderInfo = result.data;
        //过滤不需要显示的数据
        this.orderInfo.orderItemList.forEach(item => {
          if(utils.isInArray(goodsIds, item.goodsId)){
            this.showOrderItemList.push(item);
          }
        })
        //设置退款退货类型
        this.returnType = this.orderInfo.status == '1' ? '0' : '3';
      }
    },
    /* 上传图片 */
    async uploadImg (file) {
      var formData = new FormData(); //构造一个 FormData，把后台需要发送的参数添加
  　　formData.append('file', file.file); //接口需要传的参数
      const result = await sysApi.upload(formData);
      if(result.code == constants.SUCCESS){
         this.applyPic.push({name: file.file.name, url:result.data.url});
      }
    },
    /* 删除图片 */
    deleteImg (file) {
      var oldApplyPic = this.applyPic;
      var newApplyPic = [];
      oldApplyPic.forEach(item => {
        if(file.file.name != item.name){
          newApplyPic.push(item);
        }
      })
      this.applyPic = newApplyPic;
      return true;
    },
    /* 申请售后 */
    async orderReturnApply () {
      this.submitLoading = true;
      this.$toast.loading("提交中...");
      //获取商品信息
      var goodsIdsArray = new Array();
      var goodsNumsArray = new Array();
      this.showOrderItemList.forEach(item => {
        goodsIdsArray.push(item.goodsId);
        goodsNumsArray.push(item.goodsNum);
      })
      var applyPicArray = new Array();
      //获取图片信息
      this.applyPic.forEach(item => {
        applyPicArray.push(item.url);
      })
      //申请售后
      const result = await orderApi.orderReturnApply({
        orderId: this.orderInfo.id,
        goodsIds: utils.join(goodsIdsArray, ","),
        goodsNums: utils.join(goodsNumsArray, ","),
        returnType: this.returnType,
        applyReason: this.returnReasonList[this.applyReasonIndex],
        applyPic: utils.join(applyPicArray, ",")
      })
      if(result.code == constants.SUCCESS){
        this.submitLoading = false;
        setTimeout(()=>{
          this.$toast.success("提交成功");
          this.$router.go(-2);
        }, 500);
      }
    }
  }
}
</script>

<style lang="scss">
.applyedit-container{
  padding: 5px 0px 15px 0px;
  .order-goods-list{
    background: #fff;
  }
  .apply-bg{
    background: #fff;
  }
  .message{
    padding: 10px;
    border: 1px solid #f6f6f6;
    border-radius: 5px;
  }
  .apply-reason{
    padding: 0;
  }
  .apply-reason:after{
    border: none;
  }
  .submit{
    margin: 16px 10px;
  }
}
</style>
